<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Upload and Resize with jQuery and PHP</title>
<script src="../../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
 <script> 
        $(document).ready(function() { 
			var title = $("#title");
			var content = $("#content");
			var picture = $("#picture");
			
			
			$("#cancel").click(function(){
				
			});
			
			$('#UploadForm').on('submit', function(e) {
			
			
				e.preventDefault();
				$('#SubmitButton').attr('disabled', ''); // disable upload button
				//show uploading message
				$("#output").html('<div style="padding:10px"><img src="../../images/loading.gif" alt="Please Wait"/> <span>Uploading...</span></div>');
				$(this).ajaxSubmit({
					target: '#output',
					success:  afterSuccess //call function after success
				});
			});
        }); 

		function afterSuccess()  { 
			//$('#UploadForm').resetForm();  // reset form
			$('#SubmitButton').removeAttr('disabled'); //enable submit button
			$("#banner_load").load("admin/admin/banner_data_admin.php");
		} 
		
		//semi upload	
function readURL(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();
		
		reader.onload = function (e) {
			$('#img_prev').attr('src', e.target.result).width(300).height(120);
		};
			reader.readAsDataURL(input.files[0]);
	}
}
 </script> 

 <link href="style/style.css" rel="stylesheet" type="text/css" />
<style>
#xp{
width:90px;
}
</style> 
</head>

<body style="background-color:white;">

<h3 style="">Add new Banner</h3>
<div id="Wrapper">

<div align="center">
<form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm">




<table id="banner_table_iframe" width="100%" border="1px">
	
	<tr>
		<td valign="top" id="xp">
			<label>Select a File</label>
		</td>
		<td>
			<input name="ImageFile" id="picture" type="file" onchange="readURL(this);"/></br>
			<img id="img_prev" src="#"/>
		</td>
	</tr>
	
	<tr>
		<td id="xp">
			<label>Title:</label>
		</td>
		<td>
			<input type="text" id="title" name="title" width="400">
			
		</td>
	</tr>
					
	<tr>
		<td valign="top" id="xp">
			<label>content:</label>
		</td>
		<td>
			<textarea id="content" name="content" style="width: 100%; height:100px;"></textarea>
		</td>
		
	</tr>
	
	<tr >
		<td colspan="2">
			<input type="submit"  id="SubmitButton" value="Upload" />
			
		</td>
	<tr>
</table>


</form>
<div id="output"></div>
</div>
</div>
</body>
</html>

